import React from 'react';
import EditableTimerList from './EditableTimerList';
import TogglesbleTimerForm from "./TogglesbleTimerForm";
import {uuid} from "../assets/js/utils";
class TimersDashboard extends React.Component {
    state = {
        timers:[
            {
                title:'撑起锻炼',
                project:'身体健康',
                id: uuid(8,10),
                elapsedTime:5456099,
                runningSince: Date.now(),
            },
            {
                title:'下班锻炼',
                project:'健康运动',
                id: uuid(8,10),
                elapsedTime:123778,
                runningSince: null,
            }
        ]
    }
    handleCreateFrom=(timer)=>{
        this.createTimer(timer);
    }
    createTimer=(timer)=>{
        timer.id=uuid(8,10);
        console.log("newTimer.....",timer)
        this.setState({
            timers: this.state.timers.concat(timer)
        })
    }
    handleEditFrom=(timer)=>{
        this.updateTimer(timer);
    }
    updateTimer = (attr) =>{
        this.setState({
            timers: this.state.timers.map((timer)=>{
                if (timer.id==attr.id){
                    return Object.assign({},timer,{
                        title:attr.title,
                        project:attr.project
                    })
                }else{
                    return timer;
                }
            })
        })
    }
    handleTrashClick=(timerId)=>{
        this.deleteTimer(timerId);
    }
    deleteTimer=(timerId)=>{
        this.setState({
            timers:this.state.timers.filter(t=>t.id!==timerId)
        })
    }
    handleStartClick=(timerId)=>{
        this.startTimer(timerId);
    }
    startTimer=(timerId)=>{
        const now = Date.now();
        this.setState({
            timers:this.state.timers.map((timer)=>{
                if (timer.id===timerId){
                    return Object.assign({},timer,{
                        runningSince:now
                    })
                }else{
                    return timer;
                }
            })
        })
    }

    handleStopClick=(timerId)=>{
        this.stopTimer(timerId);
    }
    stopTimer=(timerId)=>{
        const now = Date.now();
        this.setState({
            timers:this.state.timers.map((timer)=>{
                if (timer.id===timerId){
                    const lastElapsed=now-timer.runningSince;
                    return Object.assign({},timer,{
                        elapsedTime:timer.elapsedTime+lastElapsed,
                        runningSince:null
                    })
                }else{
                    return timer;
                }
            })
        })
    }

    render() {
        return(
            <div className="">
                <div className="">
                    <EditableTimerList timers={this.state.timers}
                                       onFormSubmit={this.handleEditFrom}
                                       onTrashClick={this.handleTrashClick}
                                       onStartClick={this.handleStartClick}
                                       onStopClick={this.handleStopClick}
                    />
                    <p>操作</p>
                    <TogglesbleTimerForm isOpen={true} onFormSubmit={this.handleCreateFrom}/>
                </div>
            </div>
        )
    }
}
export default TimersDashboard;